<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary">添加权限</el-button>
      <el-table
        :data="list"
        row-key="id"
        border
        default-expand-all
        stripe
        icon-class="el-icon-folder-opened"
      >
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button v-if="row.type===1" size="mini" type="text" @click="openDialog('add',row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="openDialog('edit',row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delList(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <dialogVue ref="permission" :currn-id="currnId" />
    </div>
  </div>
</template>
<script>

import { getPermissionList, delPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import dialogVue from './components/dialog.vue'
export default {
  name: 'Permission',
  components: {
    dialogVue
  },
  data () {
    return {
      list: [],
      currnId: null

    }
  },
  created () {
    this.getPermissionData()
  },
  methods: {
    async  getPermissionData () {
      const data = await getPermissionList()

      const res = transListToTreeData(data, 0)
      this.list = res
    },
    // 打开弹窗
    openDialog (type, id) {
      if (type === 'add') {
        this.currnId = id
        this.$refs.permission.reset()
      }
      if (type === 'edit') {
        this.currnId = id
        this.$nextTick(() => {
          this.$refs.permission.getDetail()
        })
      }
      this.$refs.permission.showDialogH()
    },
    // 删除
    async  delList (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delPermissionList(id)

        this.getPermissionData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }

}
</script>

<style scoped lang="scss">
.btn-add {
  margin: 10px;
}
</style>
